<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset='utf-8' />
<script
   type="text/javascript"
   src="http://ditu.google.cn/maps/api/js?sensor=false&libraries=places,geometry&language=zh-CN"> 
</script> 
<script type="text/javascript"> 
  var map, searchservice, infowindow;
  var  markers = [];
  function initialize() {
    map = new google.maps.Map(document.getElementById('map'));
    map.setCenter(new google.maps.LatLng(39.989139,116.402314));
    map.setZoom(15);
    map.setMapTypeId('roadmap');

    infowindow = new google.maps.InfoWindow();
    searchservice = new google.maps.places.PlacesService(map);
  }

  var render = function() {
    var location = map.getCenter();
    var radius = google.maps.geometry.spherical.computeDistanceBetween(map.getCenter(), map.getBounds().getNorthEast()) / 3;
    search(location, radius);
  };
 
  function search(loc, rad) {
    searchservice.search({
      location: loc,
      radius: rad }, function(res, status) {

      for(var i=0; i<markers.length; i++){
        markers[i].setMap(null);
      }
      markers = [];

      var td = document.getElementById("root");
      while (td && td.childNodes.length) {
        td.removeChild(td.childNodes[0]);
      }
 
      for (i = 0; i < res.length; ++i) {
        var marker = new google.maps.Marker({
          map: map,
          position: res[i].geometry.location,
          draggable: false,
          title: res[i].name,
          icon: new google.maps.MarkerImage(res[i].icon,
                                            null, null, null,
                                            new google.maps.Size(24,24))           
          });
          markers.push(marker);

          var div = document.createElement("div");
          div.style.border = "hidden 0px";
          div.style.height = "30px";
          div.style.width = "232px";
          div.style.textOverflow = "ellipsis";
          div.style.overflow = "hidden";
          div.style.whiteSpace = "nowrap";
          div.style.margin = "1px";
          div.style.padding = "2px";
          div.style.backgroundColor = (i%2) ? "white" : "#eeeeee";
          div.innerHTML = '<table><tr style="vertical-align: middle; cursor:pointer;"><td><img src="' + res[i].icon + '" style="width:24px;"></td><td style="width:100px;">' + res[i].name + ', ' + (res[i].vicinity || '') + '</td></tr></table>';
          div.onclick = makeFunc([res[i].reference, marker], function(ref) { clicked(ref); });
          td.appendChild(div);
        }
      }
    );
  }

  function makeFunc(arg, func) {
    return function() { func(arg); };
  }

  function clicked(ref) {
    searchservice.getDetails({reference: ref[0]}, function(res, status) {
      infowindow.close();
      infowindow.setContent(
        '<table style="font-size:12px; padding: 2px;"><tr  style="vertical-align:middle;"><td>'
        + '<img src="' + res.icon + '" style="width:48px;"></td><td>'
        + '<br><a href="' + res.url + '">' + res.name + '</a>' 
        + '<br>' + (res.formatted_address || '')
        + '<br>' + (res.formatted_phone_number || '')
	+ '</td></tr></table>');
      infowindow.open(map, ref[1]);
    });
  }
</script> 
</head> 
<body onload="initialize()" style="margin:0; background-color:#F0F0F0;"> 
  <table style="background-color:white; margin:0"> 
  <tr><td style="vertical-align:top" colspan="2"> 
  </td>
  <tr>
  <td>
    <div id="map" style="width:500px; height:405px;"> 
  </td>
  <td style="width:252px; height:380px; overflow:hidden;">
    <input type=submit style="width:252px; height:20px;" value="搜索" onclick="render();">
      <div id="root" style="width:252px; height:381px; overflow:auto; margin-top:5px;">
  </td>
  </tr></table> 
</body> 
</html> 
